<template>
  <div>
    <div class="d1">
      <p>子组件内容：{{state.age}}</p>
      <button @click="add">添加</button>
    </div>
  </div>
</template>

<script setup>
//在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的   ，但在 script-setup 模式下，就是由 defineExpose 来完成
import { reactive, toRefs } from 'vue';

let state = reactive({
  age: 1
})
let add = () => {
  state.age++
}

//导出到父组件
defineExpose({
  ...toRefs(state),
  add,
})
</script>
<style scoped lang ='less'>
</style>